<template>
  <div>
    <a-descriptions layout="vertical">
      <a-descriptions-item label="姓名">
        安徽多方通信
      </a-descriptions-item>
      <a-descriptions-item label="手机">
        {{ phone }}
      </a-descriptions-item>
      <a-descriptions-item label="地址">
        安徽省合肥市尚泽大都会C座1207
      </a-descriptions-item>
      <a-descriptions-item label="公司法人" span="2">
        ***
      </a-descriptions-item>
      <a-descriptions-item label="备注">
        empty
      </a-descriptions-item>
    </a-descriptions>
    <a-card :bordered="false" title="流程进度">
      <a-steps :direction="isMobile && 'vertical' || 'horizontal'" :current="1" progressDot>
        <a-step>
          <template v-slot:title>
            <span>创建项目</span>
          </template>
          <template v-slot:description>
            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
              曲丽丽<a-icon type="dingding" style="margin-left: 8px;" />
              <div>2016-12-12 12:32</div>
            </div>
          </template>
        </a-step>
        <a-step>
          <template v-slot:title>
            <span>部门初审</span>
          </template>
          <template v-slot:description>
            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
              周毛毛<a-icon type="dingding" style="color: rgb(0, 160, 233); margin-left: 8px;" />
              <div><a>催一下</a></div>
            </div>
          </template>
        </a-step>
        <a-step title="财务复核" />
        <a-step title="完成" />
      </a-steps>
    </a-card>
    <a-divider orientation="left">
      用户资料
    </a-divider>
    <a-card>
      <a-descriptions title="企业资格证" layout="vertical">
        <div>
          <a-upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            list-type="picture-card"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 8">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                上传
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" width="40%" :footer="null" @cancel="handleCancel">
            <viewer :images="previewImage">
              <img
                alt="example"
                style="width: 100%"
                :src="previewImage" />
            </viewer>
          </a-modal>
        </div>
      </a-descriptions>
    </a-card>
    <a-card>
      <a-descriptions title="合同备案" layout="vertical">
        <div>
          <a-upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            list-type="picture-card"
            :file-list="contractList"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="contractList.length < 8">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                上传
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" width="40%" :footer="null" @cancel="handleCancel">
            <viewer :images="previewImage">
              <img
                alt="example"
                style="width: 100%"
                :src="previewImage" />
            </viewer>
          </a-modal>
        </div>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script>
import { baseMixin } from '@/store/app-mixin'
function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
const imgList = [
  {
    uid: '-1',
    name: 'image.png',
    status: 'done',
    url: 'https://th.bing.com/th/id/Rb66139ef01501975d4e6208d61a46d92?rik=P3u%2bn8Re%2bWd%2b1w&riu=http%3a%2f%2fwww.hardalloy.com.cn%2fqualificationimg%2f090607%2f200967214332150.JPG&ehk=Ry4YdxbiOXm4pNKN1%2f5mRkyHzAU37jAQYtqdSqv3u4Y%3d&risl=&pid=ImgRaw'
  },
  {
    uid: '-2',
    name: 'image.png',
    status: 'done',
    url: 'https://th.bing.com/th/id/R7e0f54c679cc9bb37028020d0ff6fa8f?rik=OF74WsL02nazhw&riu=http%3a%2f%2fwww.rong1.com.cn%2fuserlist%2fgcdi%2fdata%2fuserpic%2f2013080816963.jpg&ehk=rQw0Tpgd8VcaK69zJOSW9MdVNd%2buUTdLOOjP8UQypJE%3d&risl=&pid=ImgRaw'
  }
]
const contractList = [
  {
    uid: '-1',
    name: 'image.png',
    status: 'done',
    url: 'https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/aa64034f78f0f736cd6af1060755b319ebc41324.jpg'
  },
  {
    uid: '-2',
    name: 'image.png',
    status: 'done',
    url: 'https://th.bing.com/th/id/Rec7c7015091cea7d0707ea07188a935a?rik=iWadrw%2bH%2fJKTUQ&riu=http%3a%2f%2fpic157.nipic.com%2ffile%2f20180312%2f26761676_120505528000_2.jpg&ehk=MZspjArwv8WdLi%2bbP93lVamVashQrHt4hgKplMMZE1k%3d&risl=&pid=ImgRaw'
  }
]
export default {
  name: 'Agent',
  props: {
    phone: {
      type: [Number, String],
      default: 0
    }
  },
  mixins: [baseMixin],
  data () {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: imgList,
      contractList
    }
  },
  methods: {
    handleCancel () {
      this.previewVisible = false
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    }
  }
}
</script>

<style lang="less" scoped>

.detail-layout {
  margin-left: 44px;
}
.text {
  color: rgba(0, 0, 0, .45);
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }
  .text {

  }
  .status-list {
    text-align: left;
  }
}
</style>
